<!--编辑商品分类页  -->
<template>
  <div class="total">
    <div class="container">
      <el-form ref="form" :model="sizeForm" label-width="auto">

        <el-form-item label="分类名称" required>
          <el-input v-model="sizeForm.name" />
        </el-form-item>

        <el-form-item label="上级分类">
          <el-select v-model="sizeForm.parentId">
            <el-option label="无上级分类" value="shanghai" />
            <el-option v-for="item in options" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="数量单位">
          <el-input v-model="sizeForm.productUnit" />
        </el-form-item>

        <el-form-item label="排序">
          <el-input v-model="sizeForm.sort" />
        </el-form-item>

        <el-form-item label="是否显示">
          <el-radio-group v-model="sizeForm.navStatus">
            <el-radio :label="1" size="large">是</el-radio>
            <el-radio :label="0" size="large">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="是否显示在导航栏">
          <el-radio-group v-model="sizeForm.showStatus">
            <el-radio :label="1" size="large">是</el-radio>
            <el-radio :label="0" size="large">否</el-radio>
          </el-radio-group>
        </el-form-item>



        <!-- 上传图片 -->

        <el-upload v-model:file-list="fileList" class="upload-demo"
          action="http://120.24.64.5:8088/mall-admin/minio/upload" :on-remove="handleRemove" :on-success="handlePreview"
          list-type="picture">
          <el-button type="primary">Click to upload</el-button>
          <template #tip>
            <div class="el-upload__tip">
              jpg/png files with a size less than 100kb
            </div>
          </template>
        </el-upload>






        <el-form-item label="待选属性">
          <div class="example-block">
            <el-cascader v-model="value" :options="options" :props="props" @change="handleChange" />
          </div>
        </el-form-item>

        <el-form-item label="关键词">
          <el-input v-model="sizeForm.keywords" />
        </el-form-item>

        <el-form-item label="分类描述">
          <el-input v-model="sizeForm.description" />
        </el-form-item>


        <el-button type="primary" @click="onConfirm" style="margin-left:50px;">提交</el-button>

      </el-form>
    </div>

  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { useRoute, useRouter } from 'vue-router';
import * as api from "@/request/api"

let route = useRoute()
let router = useRouter()
let id = route.query.id


const sizeForm = ref({
  name: '',
  parentId: '无上级分类',
  productUnit: '',
  sort: '',
  navStatus: 1,
  showStatus: 1,
  icon: '',
  attr: '',
  keywords: '',
  description: '',
})


//待选属性
const value = ref([])
const props = {
  expandTrigger: 'hover',
}
const handleChange = (value) => {
  console.log(value)
}

const options = ref([])

//进入编辑页面后根据id请求数据
api.product.productCategoryItem(id).then((res) => {
  console.log(res);
  let newRes = JSON.parse(JSON.stringify(res))
  sizeForm.value = newRes
})
//上级分类的请求
let obj2 = { parentId: 0, pageNum: 1, pageSize: 100 }
api.product.productCateList(obj2).then((res) => {
  console.log(res);
  options.value=res.list.map((el)=>{
    return {
      value:el.id,
      label:el.name
    }
  })

})
//请求待选属性的列表
api.product.productCategoryWithAttr().then((res) => {
  console.log(res);
  let newRes = res.map((item) => {
    return {
      value: item.name,
      label: item.name,
      children: item.productAttributeList.map((el) => {
        return {
          value: el.name,
          label: el.name
        }
      })
    }
  }
  )
  options.value = newRes
})


//编辑完成后点击确认
let onConfirm = async (id: any, name: any) => {
  let response = await api.product.productCatUpdate({
    id: id,
    name: name
  })

  console.log(response);
  router.push('productCate')
}

//上传图片
const fileList = ref<UploadUserFile[]>([
  {
    name: '',
    url: '',
  }
])

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {

}

const handlePreview: UploadProps['onPreview'] = (file) => {
  console.log(file)
}














</script>


<style scoped>
.el-radio-group {
  margin-right: 12px;
}

:deep .el-input__wrapper {
  width: 200px !important;
}

.total {
  width: 100%;
  height: 100%;
}

.container {
  width: 720px;
  margin: 0 auto;
  padding: 30px;
  border: 1px solid #eee;
  margin-top: 30px;
}


:deep .el-input__wrapper {
  width: 530px;
}

:deep .el-input__inner {
  width: 530px;
}
</style>